<template>
  <van-tabbar v-model="active">
    <!--<van-tabbar-item
      v-for="(item, index) in asyncRouters"
      v-if="!item.hidden"
      :key="index"
      :name="item.path"
      :to="item.path"
      :icon="item.icon"
      replace>
      {{ item.name }}
    </van-tabbar-item>-->
    <van-tabbar-item name="/" replace to="/" icon="home-o">首页</van-tabbar-item>
    <van-tabbar-item name="/login" replace to="/login" icon="search">登录页面</van-tabbar-item>
    <van-tabbar-item name="/editor" replace to="/editor" icon="edit">编辑</van-tabbar-item>
  </van-tabbar>
</template>

<script>
import { mapState } from 'vuex'

export default {
  name: 'Footer',
  data() {
    return {
      active: '/'
    }
  },
  computed: {
    ...mapState({
      asyncRouters: state => state.user.asyncRoutes
    })
  },
  watch: {
    // 实时监听路由状态
    '$route.path': {
      handler(val) {
        this.active = val
      },
      immediate: true // 立即执行
    }
  },
  mounted() {
  }
}
</script>

<style scoped lang="less" rel="stylesheet/less">

</style>
